<template>
  <el-dialog
      :close-on-click-modal="false"
      width="80%"
      :before-close="handleClose"
      :visible.sync="dialogFormVisible"
    >
      <template slot="title">
        <div :style="exportColor">{{ modify == 1 ? "新增" : "修改" }}样品资料</div>
      </template>
      <el-form
        ref="dataForm"
        :model="dataForm"
        label-position="left"
        status-icon
        label-width="90px"
        :rules="rules"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item class="required" label="耗材编号" prop="fsampleno">
              <el-input v-model="dataForm.fsampleno" :disabled="modify == 2"  placeholder="耗材编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="样品名称" prop="fsamplename">
              <el-input v-model="dataForm.fsamplename" placeholder="样品名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="样品条码" prop="fbarcode">
              <el-input v-model="dataForm.fbarcode" placeholder="样品条码"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="英文名称">
              <el-input v-model="dataForm.fengname" placeholder="英文名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="样品分类" prop="fclassstno">
              <el-select
                v-model="dataForm.fclassstno"
                clearable
                filterable
                placeholder="样品分类"
              >
                <el-option
                  v-for="item in catlist"
                  :key="item.fclassstno"
                  :label="item.fclassstname"
                  :value="item.fclassstno"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item  label="型号" >
              <el-input v-model="dataForm.fspec" placeholder="型号"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item class="required" label="单位" prop="funit">
              <el-input v-model="dataForm.funit" placeholder="单位"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="required" label="管制物品" prop="fdanger">
              <el-select
                v-model="dataForm.fdanger"
                clearable
                filterable
                placeholder="管制物品"
              >
                <el-option
                  v-for="item in fdangerlist"
                  :key="item.value"
                  :label="item.lable"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs style="width: 100%" type="border-card">
        <el-tab-pane label="所需耗材">
        <div class="app-container">
          <el-row>
            <el-col :span="6">
              <el-form
                ref="dataForm1"
                :model="dataForm1"
                label-position="left"
                label-width="70px"
              >
              <el-form-item label="行号">
                <el-input class="fromiput" v-model="dataForm1.index"/>
              </el-form-item>
              <el-form-item label="耗材编号" prop="fmaterialno">
                  <div class="selectdiv">
                      <el-input class="fromiput" v-model="dataForm1.fmaterialno"/>
                      <i class="el-icon-search selectI selectico" @click="openhaocai"/>
                  </div>
              </el-form-item>
              <el-form-item label="耗材名称">
                <el-input class="fromiput" v-model="dataForm1.fmaterialname"/>
              </el-form-item>
              <el-form-item label="所需数量">
                <el-input class="fromiput" v-model="dataForm1.fqty"/>
              </el-form-item>
              <el-form-item >
               <el-button
                    :style="{ background: buttonColor.confirm, color: buttonColor.color }"
                    round
                    @click="inserthaocai"
                    size="medium"
                    >确定</el-button
                  >
              </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="18">
              <el-table :data="list" element-loading-text="正在查询中。。。" border>
                <el-table-column align="left" label="行号" type="index" width="50"/>
                <el-table-column align="left" label="耗材编号" prop="fmaterialno" />
                <el-table-column align="left" label="耗材名称" prop="fmaterialname" />
                <el-table-column align="left" label="所需数量" prop="fqty" />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="所需危化品">
        <div class="app-container">
          <el-row>
            <el-col :span="7">
              <el-form
                ref="dataForm1"
                :model="dataForm"
                label-position="left"
                label-width="90px"
              >
              <el-form-item label="行号">
                <el-input class="fromiput" v-model="dataForm2.index"/>
              </el-form-item>
              <el-form-item label="危化品编号">
                  <div class="selectdiv">
                      <el-input class="fromiput" v-model="dataForm2.fgoodno"/>
                      <i class="el-icon-search selectI selectico" @click="materialIdVisibleis=true"/>
                  </div>
              </el-form-item>
              <el-form-item label="危化品名称">
                <el-input class="fromiput" v-model="dataForm2.fgoodname"/>
              </el-form-item>
              <el-form-item >
               <el-button
                    :style="{ background: buttonColor.confirm, color: buttonColor.color }"
                    round
                    @click="insertweihua"
                    size="medium"
                    >确定</el-button
                  >
              </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="17">
              <el-table :data="list2" element-loading-text="正在查询中。。。" border>
                <el-table-column align="left" label="行号" type="index" width="50"/>
                <el-table-column align="left" label="危化品编号" prop="fgoodno" />
                <el-table-column align="left" label="危化品名称" prop="fgoodname" />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <el-tab-pane label="所需化验步骤">
        <div class="app-container">
          <el-row>
            <el-col :span="7">
              <el-form
                ref="dataForm1"
                :model="dataForm"
                label-position="left"
                label-width="100px"
              >
              <el-form-item label="行号">
                <el-input class="fromiput"/>
              </el-form-item>
              <el-form-item label="化验设备">
                  <div class="selectdiv">
                      <el-input class="fromiput"/>
                      <i class="el-icon-search selectI selectico"/>
                  </div>
              </el-form-item>
              <el-form-item label="化验步骤">
                <el-input class="fromiput"/>
              </el-form-item>
              <el-form-item label="化验时间(分)">
                <el-input class="fromiput"/>
              </el-form-item>
              <el-form-item label="化验说明">
                <el-input class="fromiput"/>
              </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="17">
              <el-table :data="list" element-loading-text="正在查询中。。。" border>
                <el-table-column align="left" label="行号" prop="fbarcode" />
                 <el-table-column align="left" label="化验设备" prop="fbarcode" />
                <el-table-column align="left" label="化验步骤" prop="fbarcode" />
                <el-table-column align="left" label="化验时间(分)" prop="fbarcode" />
                <el-table-column align="left" label="化验说明" prop="fbegdate" />
              </el-table>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button
          :style="{
            background: buttonColor.cancel,
            color: buttonColor.colorone,
          }"
          round
          @click="handleClose"
          size="medium"
          >取消</el-button
        >
        <el-button
          :style="{ background: buttonColor.confirm, color: buttonColor.color }"
          round
          @click="UpdateorCreate"
          size="medium"
          >{{ modify == 1 ? "新增" : "修改" }}</el-button
        >
      </div>
       <Consumables ref="Consumables" 
       :materialIdVisible.sync="materialIdVisible"
        :fsiteNo.sync="materialFsiteNo" 
        :tableColor="tableColor" 
        @materialDialog="materialDialogValue"/>

        <material :materialIdVisible.sync="materialIdVisibleis" 
        :fsiteNo.sync="materialFsiteNo" :tableColor="tableColor" 
        @materialDialog="materialDialogValueis" />
    </el-dialog>
</template>

<script>
import Consumables from "@/components/Consumables"
import Material from '@/components/Material'
import {
  tableColor,
  titleColor,
  exportColor,
  buttonColor,
} from "@/filters/index";
import { create, update } from "@/api/sample/detail";
export default {
  name: "tabs",
  props:["catlist"],
  components:{Consumables,Material},
  data() {
    return {
      buttonColor,
      tableColor,
      titleColor,
      exportColor,
      list: [],
      list2:[],
      modify: 1,
      materialIdVisible:false,
      materialIdVisibleis:false,
      materialFsiteNo:this.$store.state.user.fsiteNo,
       dialogFormVisible: false,
      fdangerlist:[
        {value:0,lable:'否'}
        ,{value:1,lable:'是'}
      ],
      dataForm: {
        fsiteNo: this.$store.state.user.fsiteNo,
        foperator: this.$store.state.user.id,
        fsampleno: undefined,
        fsamplename: undefined,
        fbarcode: undefined,
        fengname: undefined,
        fclassstno: undefined,
        fspec: undefined,
        funit: undefined,
        fdanger: 0,
        fsafecard: undefined,
        fsamplestate: '3002',
        fupddate: new Date(),
      },
      dataForm1:{
        index:1,
        fmaterialno:undefined,
        fqty:0,
        fmaterialname:undefined,
      },
      dataForm2:{
        index:1,
        fgoodno:undefined,
        fqty:0,
        fgoodname:undefined,
      },
      list:[],
      rules: {
        fsampleno: [{ required: true, message: "分类名称不能为空" }],
        fsamplename: [{ required: true, message: "分类编号不能为空" }],
        fbarcode:[{ required: true, message: "分类编号不能为空" }],
        fclassstno:[{ required: true, message: "分类编号不能为空" }],
        funit:[{ required: true, message: "分类编号不能为空" }],
        fdanger:[{ required: true, message: "分类编号不能为空" }],
        fsafecard:[{ required: true, message: "分类编号不能为空" }],
        fsamplestate:[{ required: true, message: "分类编号不能为空" }]
      },
    };
  },
  created() {},
  methods: {
    //
    intData(row)
    {
        if(row==undefined)
        {
            this.modify=1;
        }
        else
        {
            this.modify=2;
            this.dataForm.fsampleno = row.fsampleno;
            this.dataForm.fsamplename = row.fsamplename;
            this.dataForm.fbarcode = row.fbarcode;
            this.dataForm.fengname = row.fengname;
            this.dataForm.fspec = row.fspec;
            this.dataForm.funit = row.funit;
            this.dataForm.fdanger = row.fdanger;
            this.dataForm.fclassstno = row.fclassstno;
            this.dataForm.fsafecard = row.fsafecard;
        }
        this.dialogFormVisible=true;
    },
    //新增、修改
    UpdateorCreate() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          var formMethod = this.modify == 1 ? create : update;
          formMethod(this.dataForm)
            .then((res) => {
              this.$notify.success({
                title: "成功",
                message: "存储资料成功",
              });
              this.dialogFormVisible = false;
              this.getList();
            })
            .catch((res) => {
              this.$notify.error({
                title: "失败",
                message: "存储资料成功",
              });
            });
        }
      });
    },
    //关闭弹框
    handleClose() {
      this.dialogFormVisible = false;
      this.$refs["dataForm"].resetFields();
    },
    //耗材
    openhaocai(){
      this.materialIdVisible=true;
    },
    //耗材返回值
    materialDialogValue(row){
     this.dataForm1.fmaterialno=row.data.fmaterialno;
     this.dataForm1.fmaterialname=row.data.fmaterialname;
    },
    //新增耗材
    inserthaocai(){
      this.list.push({
        fmaterialno:this.dataForm1.fmaterialno,
        fmaterialname:this.dataForm1.fmaterialname,
        fqty:this.dataForm1.fmaterialname
      });
      this.dataForm1.fmaterialno=undefined;
      this.dataForm1.fmaterialname=undefined;
      this.dataForm1.fqty=0
      this.dataForm1.index=this.list.length+1;
    },
    //新增危化品
    insertweihua(){
       this.list2.push({
        fgoodno:this.dataForm2.fgoodno,
        fgoodname:this.dataForm2.fgoodname,
        fqty:this.dataForm2.fqty
      })
       this.dataForm2.fgoodno=undefined;
      this.dataForm2.fgoodname=undefined;
      this.dataForm2.fqty=0
      this.dataForm2.index=this.list.length+1;
    },
    //危化品返回值
    materialDialogValueis(row){
       this.dataForm2.fgoodno=row.data.fgoodno;
      this.dataForm2.fgoodname=row.data.fgoodname;
      this.dataForm2.fqty=0
    },
  },
};
</script>
<style>
.fromiput input{
  width: 85% !important;
}
.selectdiv{
 position: relative;
}
.selectico{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2px;
}
</style>